<template>
  <!--pages/index/component/workTypeImg/index.wxml-->
  <view class="content_box">
    <view v-for="(item, index) in workTypeValue" :key="index" @click="handleGodetail(item)">
      <view class="top">
        <image :src="item.url" mode="" />
        <view class="w_text" v-if="item.positionType == 1">零工兼职</view>
        <view class="w_text" v-if="item.positionType == 2">小时工兼职</view>
        <view class="w_text" v-if="item.positionType == 3">全职岗位</view>
        <view class="t_text">{{ item.addressLabel }}</view>
      </view>
      <view class="firstLine">{{ item.positionName }}</view>
      <view class="secLine">
        <view v-for="z in item.labels" :key=z>{{ z }}</view>
        <view>{{ item.experienceLabel }}</view>
        <view v-if="item.calculationType == 1">日结</view>
        <view v-if="item.calculationType == 2">周结</view>
        <view v-if="item.calculationType == 3">月结</view>
        <view>{{ item.educationLabel }}</view>
      </view>
      <view class="threeLine">{{ item.fullName }}</view>
      <view class="fourLine">
        <text>￥</text>
        <text class="num bigNum">{{ Number(item.startSalary) }}</text>
        <text class="num bigNum" v-if="item.endSalary">～{{ Number(item.endSalary) }}</text>
        <text>/{{ item.salaryPeriodLabel }}</text>
      </view>
    </view>

  </view>
</template>
  
<script>
export default {
  props: {
    workTypeValue: {
      type: Array,
      default: [],
    },
    positionType: {
      type: String,
      default: '1'
    }
  },
  components: {},
  data() {
    return {
      styleData: {
        topText: "",
        background: "#2eabee",
        TextColor: "#FFF",
      },
    };
  },
  computed: {},
  watch: {},
  async onLoad(options) { },
  async onShow() { },
  onReady() { },
  mounted() {
    console.log(this.workTypeValue);
  },
  methods: {
    handleGodetail(item) {
      console.log(item, "item-岗位详情-123");
      uni.navigateTo({
        url:
          "/pages/recruit/post/postDetail/index?positionId=" + item.positionId + '&positionType=' + this.positionType,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
/* pages/index/component/workTypeImg/index.wxss */
.content_box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;

  // justify-content: space-between;
  >view {
    width: 44%;
    height: 260px;
    background: #ffffff;
    border-radius: 16px;
    margin: 5px;
    padding: 0 5px;

    >view {
      margin-bottom: 10px;
    }

    .top {
      position: relative;
      border-radius: 10px;
      overflow: hidden;
      margin-top: 5px;

      image {
        width: 100%;
        height: 120px;
      }

      .w_text,
      .t_text {
        position: absolute;
      }

      .w_text {
        top: 5px;
        left: 5px;
        background: #34a1ff;
        border-radius: 4px;
        padding: 4px 8px;
        color: #fff;
        font-size: 10px;
      }

      .t_text {
        right: 0;
        bottom: 5px;
        background: rgba(0, 0, 0, 0.5);
        font-size: 10px;
        padding: 5px;
        color: #fff;
      }
    }

    .firstLine {
      font-family: PingFangSC-Medium;
      font-weight: 500;
      font-size: 16px;
      color: #000;
    }

    .secLine {
      display: flex;
      flex-wrap: wrap;

      >view {
        background: #f5f5f5;
        border: 1px solid #cfcfcf;
        padding: 4rpx 10rpx;
        border-radius: 8rpx;
        margin: 0 5rpx;
        font-size: 10px;
        color: #000000a3;
        margin-top: 10rpx
      }
    }

    .threeLine {
      font-size: 12px;
      color: #000000a3;
      margin-bottom: 5px;
    }

    .fourLine {
      font-size: 14px;

      .num {
        color: #ff9e24;
      }

      .bigNum {
        font-size: 30rpx;
      }
    }
  }
}
</style>
  